<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        /* v-cloak 在html属于标签内的自定义属性 */
        [v-cloak] {
            display: none;
        }

        .wrap{
            width: 200px;
            height: 200px;
            background-color:bisque;
            margin: 50px;
            overflow: hidden;
        }
        .sub{
            width: 100px;
            height: 100px;
            background-color:cornflowerblue;
            margin: 50px;
        }
        textarea{
            width: 200px;
            height: 100px;
            resize: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div>
            <h3>.enter</h3>
            <textarea @keydown.enter="keydownHandler"></textarea>
            <textarea @keydown.13="keydownHandler"></textarea>
        </div>
        <div>
            <h3>.F5</h3>
            <textarea @keydown.F5.prevent="keydownHandler"></textarea>
        </div>
        <div>
            <h3>.space</h3>
            <textarea @keydown.space="keydownHandler"></textarea>
        </div>
        <div>
            <h3>.c</h3>
            <textarea @keydown.c.v="keydownHandler"></textarea>
        </div>
        <div>
            <h3>.left.right.up.down</h3>
            <textarea @keydown.left.right.up.down="keydownHandler"></textarea>
        </div>
    </div>
</body>
<script>
     // 指令:
    // 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 指令:用于标签内, 作为标签内的自定义属性  => Vue在将模版解析为虚拟DOM时会处理 Vue中的自定义属性

    // 注意:
    // 1. 指令 (Directives) 是带有v-前缀的特殊属性 => Vue中的自定义属性
    // 2. 指令属性的值预期是单个 JavaScript 表达式
    // 3. 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 常见指令:
    // v-html  => 在元素中输出html结构(会覆盖元素原本的内容)
    // v-text  => 在元素中输出文本结构(会覆盖元素原本的内容)
    // v-pre   => 在元素内禁用文本插值语法
    // v-cloak 等页面编译完毕再展示视图  (配合css使用)

    // v-if  条件渲染  => 根据指令的值决定元素是否渲染  true => 渲染  false=> 不渲染
    // v-show 条件展示 => 不管条件成立与否,元素都会渲染, 如果表达式结果为true,元素就会显示(display:block),false=>元素就会隐藏(display:none)

    // v-bind 属性绑定 =>  响应式地更新html属性  => 将Vue实例中的数据,放到标签内,作为标签内某个属性的属性值 (操作元素,改变元素的属性值)
    //    a:   v-bind:参数="指令值"    => 单个绑定  参数名:需要绑定的属性名   指令的值: 绑定的属性值
    //    b:   v-bind = "指令值"       => 批量绑定  指令的值是一个对象 (对象的键名:就是需要绑定的属性名,对象的键值:就是需要绑定的属性值)


    // class 和 style绑定: 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

    // v-on

    // 指令的常见格式:
    // v-指令名
    // v-指令名="指令值"
    // v-指令名:参数="指令值"   

</script>
<script>

    // v-on  事件绑定 -> 给元素绑定事件
    // a. v-on:参数="指令值"     =>  (1) 参数名就是需要绑定的事件名  (2) 指令值的值可以是javascript表达式
    //    事件简写  v-on:简写为@  =>   v-on:click   @click

    // 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

    // 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

    // 事件修饰符
    // .stop      阻止事件冒泡
    // .prevent   阻止浏览器默认行为
    // .capture   以事件捕获形式触发事件
    // .self      只有元素自身可以触发事件  e.target == this
    // .once      事件触发一次之后就会被清除
    // .passive   修饰符尤其能够提升移动端的性能。

    // 按键修饰符  => 只有按下指定按键可以触发键盘事件
    // .enter
    // .tab
    // .delete (捕获“删除”和“退格”键)
    // .esc
    // .space
    // .up
    // .down
    // .left
    // .right


    // 页面加载时进行初始化渲染
    var app = new Vue({  // 创建Vue实例
        el: "#app",   // 挂载的元素
        data: { // 数据层 => 对应属性名将属性值 拼接到模版语法中
            count: 100,
        },
        methods: {
            // 按enter键可触发
            // keydownHandler:function(e){
            //     var keyCode = e.keyCode;
            //     if(keyCode == 13){
            //         console.log("按键被按下",e.key);
            //     }
            // },


            keydownHandler:function(e){
                console.log("按键被按下",e.key);
            },
          
        }
    })









</script>

</html>